<template>
  <f-icon :color="'red'" :size="20"> <AddCircle /></f-icon>
  <f-icon :color="'yellow'" :size="80"><AddCircle /></f-icon>
  <p><br />-----------</p>

  <!-- v-model:selectedIds  => props:selectedIds , emit(update:selectedIds) -->

  <!-- :onLoad="loadTree" -->
  <f-tree :data="data" v-model:selectedIds="selectedIdsRef" show-checkbox :default-checked-ids="['40', '41']" selectable multiple idField="key">
    <template #default="{ node }">
      {{ node.id }} --
      {{ node.label }}
    </template>
  </f-tree>
  <p><br />-----------</p>
  {{ checkValue }}
  <f-checkbox :modelValue="true" @change="handleChange">checkbox</f-checkbox>
  <p><br />-----------</p>

  <f-button size="medium" type="danger" :round="true" icon-placement="right" @click="buttonClick">
    <template #icon>
      <f-icon><AddCircle /></f-icon>
    </template>
    按钮
  </f-button>

  <p><br />-----------</p>
  {{ username }}
  <f-input v-model="username" @focus="handleFocus" @blur="handleBlur" :clearable="true" placeholder="请输入内容">
    <template #prepend>知乎</template>
    <template #prefix>
      <f-icon size="24"><AddCircle /></f-icon>
    </template>
    <!-- <template #sufix>
      <f-icon size="24"><AddCircle /></f-icon>
    </template> -->
    <template #apend>知乎</template>
  </f-input>

  <p><br />-----------</p>

  <f-form
    ref="formRef"
    :model="formData"
    :rules="{
      username: { min: 6, max: 10, message: '输入6-10为', trigger: ['blur', 'change'] }
    }"
  >
    <f-form-item label="用户" prop="username" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
      <f-input v-model="formData.username" placeholder="请输入内容"></f-input>
    </f-form-item>
    <f-form-item label="密码" prop="password" :rules="[{ required: true, message: '请输入用密码', trigger: 'blur' }]">
      <f-input v-model="formData.password" placeholder="请输入内容"></f-input>
    </f-form-item>
    <f-button type="primary" @click="submit"> 提交</f-button>
  </f-form>
</template>
<script setup lang="ts">
// import { TreeOption } from '@fly/components/tree'
import { FormInstance } from '@fly/components/form'
import { AddCircle } from '@vicons/ionicons5'
import { reactive, ref } from 'vue'

// 1) 创建一个渲染数据，测试选中节点功能，自定义插槽功能
function createData(level = 4, parentKey = ''): any {
  if (!level) return []
  const arr = new Array(20 - level).fill(0)
  return arr.map((_, idx: number) => {
    const key = parentKey + level + idx
    return {
      label: createLabel(level),
      key,
      children: createData(level - 1, key)
    }
  })
}
function createLabel(level: number): string {
  if (level === 4) return '道生一'
  if (level === 3) return '一生二'
  if (level === 2) return '二生三'
  if (level === 1) return '三生万物'
  return ''
}

// 2) 测试异步加载的数据
// function createData() {
//   return [
//     {
//       label: nextLabel(),
//       key: 1,
//       isLeaf: false
//     },
//     {
//       label: nextLabel(),
//       key: 2,
//       isLeaf: false
//     }
//   ]
// }

// function nextLabel(currentLabel?: string | number): string {
//   if (!currentLabel) return 'Out of Tao, One is born'
//   if (currentLabel === 'Out of Tao, One is born') return 'Out of One, Two'
//   if (currentLabel === 'Out of One, Two') return 'Out of Two, Three'
//   if (currentLabel === 'Out of Two, Three') {
//     return 'Out of Three, the created universe'
//   }
//   if (currentLabel === 'Out of Three, the created universe') {
//     return 'Out of Tao, One is born'
//   }
//   return ''
// }

// 3) 测试是否可选的数据

// function loadTree(node: TreeOption) {
//   //node:点击时需要展开的节点
//   return new Promise<TreeOption[]>((resolve) => {
//     setTimeout(() => {
//       resolve([
//         //这个数据作为当前展开的node的children属性
//         {
//           label: nextLabel(node.label),
//           key: node.key + nextLabel(node.label),
//           isLeaf: false
//         }
//       ])
//     }, 1000)
//   })
// }
const data = ref(createData())
console.log('data---', data.value)

// 3) 测试禁用功能
// const data = ref<TreeOption[]>([
//   {
//     key: '0',
//     label: '0',
//     children: [
//       {
//         key: '0-0',
//         label: '0-0'
//       },
//       {
//         disabled: true,
//         key: '0-1',
//         label: '0-1',
//         children: [
//           {
//             label: '0-1-0',
//             key: '0-1-0'
//           },
//           {
//             label: '0-1-1',
//             key: '0-1-1'
//           }
//         ]
//       }
//     ]
//   }
// ])

// 获取选中的节点
type Key = string | number
const selectedIdsRef = ref<Key[]>(['40', '41'])
console.log(selectedIdsRef.value)

// checkbox测试
const checkValue = ref(true)
console.log(checkValue.value)

function handleChange(val: boolean) {
  console.log(val)
}

// button测试
function buttonClick() {
  console.log('点击')
}

// input测试
const username = ref('hello')
function handleFocus(e: Event) {
  console.log((e.target as HTMLInputElement).value, 'focus')
}
function handleBlur(e: Event) {
  console.log((e.target as HTMLInputElement).value, 'blur')
}

// 测试form组件

const formData = reactive({ username: '张三', password: '' })
const formRef = ref<FormInstance>()
const submit = () => {
  console.log('lalalal ')
  formRef.value?.validate((valid, error) => {
    console.log(valid, error)
  })
}
</script>
